<template>
	<!-- 页面内容--个人中心页 -->
	<view class="part1">
		<customerheadVue :showback='true'></customerheadVue>
		<view class="P-score flexcenter">
			{{displayScore }}
			<view class="btnbox flexcenter">
				<p>{{$t('ucenter.creditreport')}}</p>
			</view>
		</view>
		<view class="P-6">
			<view class="P-3 flexcenter">
				<view class="container">
					<view class="section">
						<image class="icon" src="/static/creditone.png"></image>
						<text class="title">{{$t('report.lineone')}}</text>
					</view>
					<view class="section">
						<image class="icon" src="/static/credittwo.png"></image>
						<text class="title">{{$t('report.linetwo')}}</text>
					</view>
					<view class="section">
						<image class="icon" src="/static/creditthree.png"></image>
						<text class="title">{{$t('report.linethree')}}</text>
					</view>
				</view>
			</view>
			<view class="flexcenter" style="margin: 20rpx  0;">
				{{$t('report.linefour')}}
			</view>
			<view class="P-3 flexcenter">
				<view class="container">
					<view class="sectiontwo">
						<text class="title">{{$t('report.linefive')}}</text>
					</view>
					<view class="sectiontwo">
						<text class="title">{{$t('report.linesix')}}</text>
					</view>
					<view class="sectiontwo">
						<text class="title">{{$t('report.lineseven')}}</text>
					</view>
				</view>
			</view>
			<view class="P-3 flexcenter">
				<view class="container last">
					{{$t('report.lineeight')}}
					</br>
					{{$t('report.linenine')}}
				</view>
			</view>
			<view style="text-align: center;margin-top: 10rpx;">
				<uni-link class="linkstyle" color="#9F84DB" fontSize='14' href="https://www.neoloanth.com/UserAgreement.html"
					:text="$t('index.pcagreement')"></uni-link>
			</view>
		</view>
	</view>
</template>

<script>
	import customerheadVue from '../../components/customerhead.vue';
	import api from '@/pages/utils/api.js';
	export default {
		data() {
			return {
				navigateHeight: '',
				scoreValue: 0,
				displayScore: 0,

			}
		},
		components: {
			customerheadVue
		},
		created() {
			this.navigateHeight = uni.getStorageSync('navigateHeight') || ""
			api.getIndexInfo().then((data) => {
				console.log('data------->>>>>>>>>>>>',data);
				const phoneNo = uni.getStorageSync('phoneNo');
				const allViewStatusZero = data.every(item => item.hasLoan === "0");

				if (allViewStatusZero) {
					this.scoreValue = 0;
					this.animateScore(0);
				} else {
					const storedScoreKey = `scoreValue_${phoneNo}`;
					const storedScore = uni.getStorageSync(storedScoreKey);

					if (storedScore) {
						this.scoreValue = storedScore;
						this.animateScore(storedScore);
					} else {
						const randomScore = Math.floor(Math.random() * (98 - 91 + 1)) + 91;
						uni.setStorageSync(storedScoreKey, randomScore);
						this.scoreValue = randomScore;
						this.animateScore(randomScore);
					}
				}
			});
			console.log('最终信用分:', this.scoreValue);

		},
		computed: {
			locales() {
				return [{
						text: this.$t('locale.es'),
						code: 'es'
					},
					{
						text: this.$t('locale.th'),
						code: 'th'
					},
				]
			}
		},
		methods: {
			animateScore(target) {
				let current = 0;
				const step = Math.ceil(target / 20); // 分20步完成
				const interval = setInterval(() => {
					current += step;
					if (current >= target) {
						current = target;
						clearInterval(interval);
					}
					this.displayScore = current;
				}, 20);
			},
		}
	}
</script>

<style scoped lang="scss">
	.P-6 {
		position: fixed;
		bottom: 0;
		left: 0;
		padding-bottom: 40rpx;
	}

	.P-score {
		width: 100%;
		margin-top: 13vh;
		font-size: 100rpx;
		font-weight: bold;
		color: #000;
		position: relative;

		.btnbox {
			font-size: 16px;
			width: 100%;
			position: absolute;
			left: 0;
			bottom: -4vh;

			p {
				width: fit-content;
				background-color: #C078DF;
				border-radius: 30rpx;
				text-align: center;
				font-weight: normal;
				color: #fff;
				padding: 10rpx;
			}
		}

	}

	.flexrowspacebetween {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flexrowstart {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flexcentercloumn {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex-direction: column;
	}

	.flexcenter {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.part1 {
		height: 100vh;
		width: 100vw;
		background-color: #151718;
		color: #fff;
		display: flow-root;
		background-image: url('/static/creditbg.png');
		background-repeat: no-repeat;
		background-size: 100% 36vh;
		background-position: top;
		font-size: 14px;



		.one {
			background-color: rgb(215, 215, 215);
			width: 100%;
			height: 60px;
			text-align: center;
			line-height: 60px;

			font-size: 25px;
			justify-content: center;
			display: flex;
		}

		.one image {
			width: 30px;
			height: 30px;
			margin-left: 60%;

		}

		.P-3 {
			width: 100%;
		}

		.container {
			padding: 20px;
			background-color: rgba(57, 58, 61, 1);
			border-radius: 20px;
			width: 76%;
			color: #D8D8D8;
		}

		.last {
			background-color: #2E2E2E;
			margin-top: 30rpx;
			font-size: 12px;
		}

		.section {
			display: flex;
			align-items: center;
			padding: 10rpx 0;
			border-bottom: 1rpx solid #454649;
			font-size: 14px;
		}

		.sectiontwo {
			display: flex;
			align-items: center;
			padding: 8rpx 0;
			border-bottom: 1rpx solid #454649;
			font-size: 14px;
		}

		.icon {
			width: 24px;
			height: 24px;
			margin-right: 10px;
		}

		.title {
			flex: 1;
			font-size: 14px;
		}

		.version {
			font-size: 14px;
		}

		.arrow {
			width: 10px;
			height: 18px;
		}


	}

	.langpopup {
		width: 80vw;
		height: fit-content;
		padding: 40rpx;
		border-radius: 30rpx;
		position: relative;
		color: #fff;
		background-image: url('../../static/bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.header {
			width: 100%;
			text-align: center;

			.btn {
				background-color: #FFF584;
				width: fit-content;
				color: #000;
				padding: 10rpx 30px;
				border-radius: 20rpx;
				transition: all 0.2s;
			}

			.btn:active {
				transform: scale(0.96);
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
			}
		}

		.locale-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.text {
				width: 220rpx;
			}
		}
	}
</style>